<template>
  <div class="cloud-charts" :style="{ width, height }">
    <div class="cloud-charts__header">
      <slot name="header"></slot>
    </div>
    <div ref="chartRef" class="charts w-full h-full"></div>
  </div>
</template>

<script setup lang="ts">
import type { ECharts, EChartsOption } from 'echarts'
import * as echarts from 'echarts'

import china from './map/china.json'
import worldJson from './map/map.json'
import { decode as decodeMap } from './utils'

interface IProps {
  width?: string
  height?: string
  options: EChartsOption
  type?: string
}

const props = withDefaults(defineProps<IProps>(), {
  width: '100%',
  height: '340px',
  type: '',
  options: () => ({}) as EChartsOption
})

const chartRef = ref<HTMLElement>()
let chartsInstance: ECharts

function resize() {
  return chartsInstance?.resize()
}

function setOptions() {
  chartsInstance.clear()
  chartsInstance?.setOption(toRaw(props.options))
}

function init() {
  const data = decodeMap(china)
  worldJson.features = worldJson.features.concat(data.features)
  // @ts-ignore
  echarts.registerMap('WordMap', worldJson)
}

onMounted(() => {
  if (props.type && props.type === 'map') {
    init()
  }

  window.addEventListener('resize', resize, false)
  nextTick(() => {
    if (chartRef.value) {
      chartsInstance = echarts.init(chartRef.value, null, {
        renderer: 'svg'
      })
      setOptions()
    }
  })
})

onUnmounted(() => {
  window.removeEventListener('resize', resize, false)
})

watch(
  () => props.options,
  () => {
    if (chartsInstance) {
      setOptions()
    }
  }
)

onUnmounted(() => {
  chartsInstance?.dispose()
  window.removeEventListener('resize', resize, false)
})

const getInstance = () => {
  return chartsInstance
}

defineExpose({ getInstance })
</script>

<style lang="less">
.cloud-charts__header {
  position: absolute;
  top: -4px;
  left: 0;
  width: fit-content;
  height: 30px;
  line-height: 30px;
  z-index: 1;
  font-size: 14px;
  // background: rgba(0, 0, 0, 0.5);
}
.cloud-charts {
  position: relative;
  .line-tooltip {
    .time {
      @apply text-5;
      font-size: 14px;
    }
    .series {
      @apply mt-1;
      &-item {
        @apply flex items-center py-1;
        &:last-child {
          @apply pb-0;
        }
        & > div {
          @apply flex;
          font-size: 14px;
          &:nth-child(1) {
            @apply border-solid border-2 rounded-full;
            width: 8px;
            height: 8px;
            border-color: red;
          }
          &:nth-child(2) {
            @apply flex-1 ml-2 mr-4 text-2;
          }
          &:nth-child(3) {
            @apply text-2 font-700;
          }
        }
      }
    }
  }
  .pie-tooltip {
    .title {
      @apply text-5;
      font-size: 14px;
    }
    .wrap {
      @apply flex items-center mt-1.5;
      font-size: 14px;
      div:first-child {
        width: 8px;
        height: 8px;
        border-radius: 2px;
      }
      .name {
        @apply ml-2 mr-3 text-2;
      }
      .value {
        @apply text-2 font-700;
      }
    }
  }
}
</style>
